<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .parent-1 {
      position: relative;
      width: 50vw;
      height: 50vh;
      border: 3px solid steelblue;
    }

    .child-1 {
      /*background: tomato;
      width: 50vw;
      height: 50vh;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;*/
      background: tomato;
      width: 200px;
      height: 200px;
      /* 核心代码 */
      position: absolute;
      top: calc(50% - 100px);
      left: calc(50% - 100px);
    }

    .parent-2 {
      width: 90vw;
      height: 90vh;
      /* height: 50vh; */
      border: 3px solid steelblue;
      /* 核心代码 */
      position: relative;
      display: flex;
    }

    .child-2 {
      /* 核心代码 */
      /*background: tomato;
      position:absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);*/

      background: tomato;
      /* 核心代码 */
      margin: auto;
    }
  </style>
  <script>
    window.onload = function () {
      // 获取图片列表，即 img 标签列表
      var imgs = document.querySelectorAll("img");
      // 获取到浏览器顶部的距离
      function getTop(e) {
        return e.offsetTop;
      }
      // 懒加载实现
      function lazyload(imgs) {
        // 可视区域高度
        var h = window.innerHeight;
        // 滚动区域高度
        var s = document.documentElement.scrollTop || document.body.scrollTop;
        for (var i = 0; i < imgs.length; i++) {
          //图片距离顶部的距离大于可视区域和滚动区域之和时懒加载
          if (h + s > getTop(imgs[i])) {
            // 真实情况是页面开始有2秒空白，所以使用 setTimeout 定时 2s
            (function (i) {
              setTimeout(function () {
                // 不加立即执行函数i会等于9
                // 隐形加载图片或其他资源，
                // 创建一个临时图片，这个图片在内存中不会到页面上去。实现隐形加载
                var temp = new Image();
                temp.src = imgs[i].getAttribute("data-src"); //只会请求一次
                // onload 判断图片加载完毕，真是图片加载完毕，再赋值给 dom 节点
                temp.onload = function () {
                  // 获取自定义属性 data-src，用真图片替换假图片
                  imgs[i].src = imgs[i].getAttribute("data-src");
                };
              }, 2000);
            })(i);
          }
        }
      }
      lazyload(imgs);
    };
  </script>
  <body>
    <div class="parent-1">
      <!-- 父元素宽高已知的情况 -->
      <div class="child-1">这是居中元素</div>
    </div>
    <div class="parent-2">
      <!-- 父元素宽高未知的情况 -->
      <div class="child-2">这是居中元素</div>
    </div>
    <img src="https://test.dapengjiaoyu.cn/dapeng-test/img/15a7cb1.1656415651020.png" alt="">
  </body>
</html>
